<template>
  <view>
    <scroll-view class="scrollView" scroll-y enable-flex @scrolltolower="loadMoreAction" :refresher-triggered="loading"
      @refresherrefresh="onRefresh" @refresherrestore="onRestore" refresher-enabled @scrolltoupper="onTop"
      @scroll="onScroll">
      <slot name="cell"></slot>
      <u-loadmore v-if="list.length > 0 || !loaded" :status="moreLoading" :load-text="loadText" />
      <Empty v-if="loaded && list.length <= 0" :baseImg="emptyImg" text="暂无数据" :fontWeight="400" />
    </scroll-view>
  </view>
</template>
<script>
import Empty from "@/components/Empty.vue";
export default {
  components: {
    Empty,
  },
  props: {
    // 请求获取的列表数据
    list: {
      type: Array,
      default: [],
    },
    // 数据总页数
    pages: {
      type: Number,
      default: 1,
    },
    // 每页请求数
    pageSize: {
      type: Number,
      default: 20,
    },
    // 请求数据时开始与结束状态
    loading: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    list(newValue, oldValue) {
      this.loaded = true;
      if (newValue) {
        if (newValue.length > this.currentListLength) {
          this.currentListLength = newValue.length;
          if (newValue.length < this.pageParams.pageNo * this.pageSize) {
             this.moreLoading = "nomore";
          }else {
            this.moreLoading = "loadmore";
          }
        } else {
          if (this.pageParams.pageNo >= this.pages) {
            this.moreLoading = "nomore";
          }else {
            this.moreLoading = "loadmore";
          }
        }
      }
    },
    pages(newValue, oldValue) {
      if (newValue) {
        this.loaded = true;
        if (this.pageParams.pageNo >= newValue) {
          this.moreLoading = "nomore";
        }else if(this.list.length < this.pageSize) {
          this.moreLoading = "nomore";
        }else {
          this.moreLoading = "loadmore";
        }
      }
    },
    pageSize(newValue, oldValue) {
      if (newValue) {
        this.pageParams.pageSize = newValue;
      }
    },
  },

  data() {
    return {
      currentListLength: 0,
      loaded: false,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      pageParams: {
        pageNo: 1,
        pageSize: 20,
      },
    };
  },
  methods: {
    loadMoreAction() {
      if (this.moreLoading == "nomore") {
        // console.log("🚀  ~ 【HPTable】触底加载无更多数据")
        return;
      }
      // console.log("🚀  ~ 【HPTable】触底加载更多")
      this.pageParams.pageNo++;
      this.moreLoading = "loadmore";
      this.$emit("loadMore", true, this.pageParams);
    },

    onRefresh() {
      console.log('🚀 ~ 【HPTable】刷新开始');
      this.pageParams.pageNo = 1;
      this.moreLoading = "loadmore";
      this.$emit("refresh", this.pageParams);
    },
    onRestore() {
      // console.log("🚀  ~ 【HPTable】刷新完毕")
    },

    onScroll(event) {
      // console.log('----【HPTable】正在滚动');
    },
    onTop() {
      // console.log('---【HPTable】滚动到顶');
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollView {
  box-sizing: border-box;
  height: calc(100vh - 360rpx);
  padding-bottom: 100rpx;
}
</style>
